<template>
  <div id="">
    <div class="head-top">
      <mt-header :title="readdata.mainTitle">
        <mt-button icon="back" slot="left" @click='back'></mt-button>
        <mt-button slot="right" @click="toggle">
          <img src="../../../../static/book/book08.png" alt="" width="30px" height="30px" v-if="CollectNo.whetherCollection == 0" />
          <img src="../../../../static/book/book09.png" alt="" width="30px" height="30px" v-else/>
        </mt-button>
      </mt-header>
    </div>
    <div class="subject">
      <p v-html="readdata.content">因松江下游一带称为“扈渎”，以后又改“沪”，故上海简称“沪”</p>
    </div>
  </div>
</template>

<script>
import api from "./../../../api/api.js";
import baseurl from "./../../../api/baseurl.js";
import { Indicator, Toast } from "mint-ui";
export default {
  data() {
    return {
      // readContent: [],
      readdata: [],
      active: true,
      CollectNo: []
    };
  },
  mounted() {
    this.datevalue = this.formatDate(new Date().getTime()); //时间
    // this.getRead();
    Indicator.open();
    this.timeOut = setTimeout(() => {
      Indicator.close();
    }, 1000);

    this.readdata = JSON.parse(sessionStorage.getItem("readdata"));
    if (this.$route.params.type == 1) {
      this.readdata.mainTitle = this.readdata.name;
      this.readdata.content = this.readdata.describ;
    } else if (this.$route.params.type == 2) {
      this.readdata.mainTitle = this.readdata.title;
      this.readdata.content = this.readdata.describ;
    }
    this.isCollect();
    this.readRecord();
    console.log(this.readdata);
  },
  created() {
    document.documentElement.scrollTop = document.body.scrollTop = 0;
  },
  methods: {
    // 行为记录
    readRecord() {
      const userid = localStorage.getItem("userid");
      const accid = localStorage.getItem("accid");
      const params = new URLSearchParams();
      params.append("title", this.readdata.mainTitle);
      params.append("type", 2);
      params.append("userid", userid);
      params.append("fileid", this.readdata.articleId || this.readdata.fileid);
      params.append("recorddate", "");
      params.append("describ", this.readdata.content);
      params.append("imgurl", this.readdata.cover || this.readdata.imgurl);
      params.append("author", this.readdata.author);
      params.append("edition", accid);
      this.$http({
        method: "post",
        url: baseurl.urls + "readrecord/addReadrecord",
        data: params
      })
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
    },
    toggle() {
      if (this.CollectNo.whetherCollection == 1) {
        this.delCollect();
      } else {
        this.addCollect();
      }
    },
    // 查询图书记录
    isCollect() {
      const userid = localStorage.getItem("userid");
      const accid = localStorage.getItem("accid");
      this.$http({
        method: "post",
        url: baseurl.urls + "readrecord/selectBookMessage",
        params: {
          columnType: 2,
          type: 1,
          userid: userid,
          fileid: this.readdata.articleId || this.readdata.fileId,
          edition: accid
        }
      })
        .then(response => {
          this.CollectNo = response.data.date;
          console.log(this.CollectNo);
        })
        .catch(error => {
          console.log(error);
        });
    },
    addCollect() {
      const userid = localStorage.getItem("userid");
      const params = new URLSearchParams();
      params.append("userid", userid);
      //收藏类型 例如：1 图书 2悦读 3 视听 4 报纸 5 期刊 ...
      params.append("columntype", 2);
      //封面
      params.append("cover", this.readdata.cover || this.readdata.imgurl);
      //名称
      params.append("name", this.readdata.mainTitle);
      //类型 1 图书 2 期刊  3 报纸  ....
      params.append("type", 1);
      //描述
      params.append("describe", this.readdata.content);
      //播放数量
      params.append("playback", "");
      //fileid 唯一值不能重复
      params.append("fileid", this.readdata.articleId || this.readdata.fileId);
      this.$http({
        method: "post",
        url: baseurl.urls + "collection/addCollection",
        data: params
      })
        .then(response => {
          if (response.status == 200) {
            this.isCollect();
            Toast("收藏成功");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    back() {
      this.$router.back(-1);
    },
    // 删除收藏
    delCollect() {
      const userid = localStorage.getItem("userid");
      this.$http({
        method: "post",
        url: baseurl.urls + "/collection/deleteCollection",
        params: {
          id: this.CollectNo.collectionId
        }
      })
        .then(response => {
          if (response.status == 200) {
            Toast("删除成功");
            this.isCollect();
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
    // getRead() {
    //   this.$http({
    //     method: "post",
    //     url: api.baseURL + "getColumResByColumnId",
    //     params: {
    //       inParam: {
    //         accId: 1,
    //         currentPage: 1,
    //         terminalType: 1,
    //         columnId: 12,
    //         time: this.datevalue,
    //         pageSize: 15,
    //         sysCode: "FH_PUBOPE"
    //       }
    //     }
    //   })
    //     .then(response => {
    //       this.readContent = response.data.data;
    //       console.log(this.readContent)
    //     })
    //     .catch(error => {
    //       console.log(error);
    //     });
    // }
  }
};
</script>

<style scoped>
.subject >>> img {
  width: 90%;
  height: 100%;
  box-sizing: border-box;
  text-indent: 0;
}
.subject >>> p {
  line-height: 1.5rem;
  text-align: justify;
  margin-bottom: 5px;
}
/* .subject>>>span{
  font-size: 16px !important;
}  */
.subject {
  font-size: 20px;
  width: 100%;
  overflow: hidden;
}
p img {
  width: 90% !important;
}
.nav {
  padding: 0 15px;
}

.nav .nav-title {
  margin-top: 25px;
  /*background: #e60012;*/
  font-size: 18px;
  font-weight: 600;
}

.nav-name {
  margin-top: 10px;
  font-size: 13px;
  margin-bottom: 12px;
  /*background-color: sandybrown;*/
}

.nav-time {
  margin-bottom: 14px;
  color: #a1a1a1;
  font-size: 12px;
}

.nav-time span:nth-of-type(2) {
  margin-left: 38px;
}

.subject p {
  padding: 0 15px;
  font: 13px/18px "microsoft yahei";
}
</style>